<template>
  <div class="container">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="100px"
      label-position="left"
    >
      <el-form-item label="上传头像" prop="avatar">
        <el-upload
          class="avatar-uploader"
          :action="upload_url"
          :headers="{
            token: token,
          }"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          accept=".png,.jpeg,.jpg,.gif"
        >
          <img v-if="form.avatar" :src="form.avatar" class="avatar" />
          <i v-else class="el-icon-camera avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="上传相册">
        <el-upload
          :action="upload_url"
          list-type="picture-card"
          :headers="{
            token: token,
          }"
          :file-list="photo"
          :on-success="handlePictureSuccess"
          :on-remove="handleRemove"
          :on-preview="handlePictureCardPreview"
          accept=".png,.jpeg,.jpg,.gif"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="会员姓名" prop="nickname">
        <el-input v-model="form.nickname"></el-input>
      </el-form-item>
      <!-- <el-form-item label="手机号码" prop="mobile">
        <el-input v-model="form.mobile"></el-input>
      </el-form-item> -->
      <el-form-item label="性别" prop="gender">
        <el-radio v-model="form.gender" :label="1">男</el-radio>
        <el-radio v-model="form.gender" :label="2">女</el-radio>
      </el-form-item>
      <el-form-item label="生日" prop="birthday">
        <el-date-picker
          v-model="form.birthday"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="婚况" prop="marriage_status">
        <el-select v-model="form.marriage_status" placeholder="请选择">
          <el-option
            v-for="item in config.marriage_list"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="民族" prop="nation">
        <el-select v-model="form.nation" placeholder="请选择">
          <el-option
            v-for="item in config.nation_list"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学历" prop="education">
        <el-select v-model="form.education" placeholder="请选择">
          <el-option
            v-for="item in config.education_list"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="居住地区" prop="address">
        <el-cascader
          v-model="form.address"
          :options="area"
          @change="handleChange"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="月收入" prop="income">
        <el-select v-model="form.income" placeholder="请选择">
          <el-option
            v-for="item in config.income_list"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <div class="bottom">
          <div class="btn submit" @click="onSubmit">下一步</div>
          <!-- <div class="btn" @click="onSubmit">跳过</div> -->
        </div>
      </el-form-item>
    </el-form>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "IndexView",
  data() {
    return {
      upload_url:'https://manage.youqianxi.com/api/common/upload',
      form: {
        avatar: "",
        income: "",
        education: "",
        nation: "",
        marriage_status: "",
        birthday: "",
        gender:1,
      },
      rules: {
        avatar: [{ required: true, message: "请上传", trigger: "change" }],
        nickname: [{ required: true, message: "请输入", trigger: "blur" }],
        mobile: [{ required: true, message: "请输入", trigger: "blur" }],
        address: [{ required: true, message: "请输入", trigger: "blur" }],
        income: [{ required: true, message: "请选择", trigger: "change" }],
        education: [{ required: true, message: "请选择", trigger: "change" }],
        nation: [{ required: true, message: "请选择", trigger: "change" }],
        marriage_status: [
          { required: true, message: "请选择", trigger: "change" },
        ],
        birthday: [{ required: true, message: "请选择", trigger: "change" }],
        gender: [{ required: true, message: "请选择", trigger: "change" }],
      },
      photo: [],
      photoList: [],
      token: localStorage.getItem("token"),
      dialogImageUrl: "",
      dialogVisible: false,
      config: {},
      area: [],
    };
  },
  props: {
    info: {
      default: {},
    },
  },
  watch: {
    info() {
      this.form = this.info;
      this.photo = [];
      if(this.info.photo.length > 0)
      {
        this.info.photo.forEach((item) => {
          this.photo.push({
            url: item,
            name: "photo",
          });
        });
      }

    },
  },
  components: {},
  mounted() {
    this.getConfig();
    this.getArea();
  },
  methods: {
    getConfig() {
      this.$post("member/config").then((res) => {
        this.config = res.data;
      });
    },
    getArea() {
      this.$post("index/area").then((res) => {
        this.area = res.data;
      });
    },
    handleChange(e) {
      this.form.address = e;
    },
    onSubmit() {
      let list = [];
      this.photo.forEach((item) => {
        list.push(item.url);
      });
      this.form.photo = list.join(",");
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit("onSubmit", this.form);
        } else {
          return false;
        }
      });
    },
    handleAvatarSuccess(res, file) {
      this.form.avatar = res.data.fullurl;
    },
    handlePictureSuccess(res, fileList) {
      this.photo.push({ url: fileList.response.data.fullurl, name: "photo" });
    },
    handleRemove(file, fileList) {
      this.photo = fileList;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  padding: 30px;
  max-width: 500px;
  margin: 0 auto;
}
.bottom {
  display: flex;
  justify-content: center;
  .btn {
    background: #fff;
    border-radius: 4px;
    border: 1px solid #cccccc;
    line-height: 40px;
    text-align: center;
    width: 110px;
    text-align: center;
    cursor: pointer;
    margin: 0 20px;
  }
  .submit {
    border: none;
    background: linear-gradient(-89deg, #ef3e91, #f4743c);
    color: #fff;
  }
}
:deep .avatar-uploader .el-upload {
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background-color: #fbfdff;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}
.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
@media screen and (max-width: 768px) {
  :deep .el-upload-list--picture-card .el-upload-list__item {
    width: 95px;
    height: 95px;
  }
  :deep .el-upload--picture-card {
    width: 95px;
    height: 95px;
    line-height: 95px;
  }
}
</style>
